/* eslint-disable react/prop-types */
import React from 'react';
import {Form, Input, Select, Button, Tabs} from 'antd';
import Editor from 'for-editor'
import UEditor from '@/components/ueditor/index'
const {Option} = Select;
const {TabPane} = Tabs;


class RichText extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: 'richText',
            value: '',
            ueditor:null
        };
    }

    componentDidMount() {

    }

    handleSubmit = e => {
        e.preventDefault();
        const editor = this.state.ueditor;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                let content;
                switch (this.state.id) {
                    case 'richText':
                        content = editor.getContent();
                        break;
                    case 'markdown':
                        content = this.state.value
                        break;
                }
                let params = Object.assign({},values,{content:content});
                console.log('Received values of form: ', params);
            }
        });
    };

    handleMarkdown(value) {
        this.setState({
            value
        })
    }

    handleChangeTab = (e) => {
        this.setState({id:e})
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 20},
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 20,
                    offset: 4,
                },
            },
        };

        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                <Form.Item label="标题">
                    {getFieldDecorator('name', {
                        rules: [
                            {
                                required: true,
                                message: '请输入标题内容',
                            },
                        ],
                    })(<Input placeholder="标题"/>)}
                </Form.Item>
                <Form.Item label="所属分类">
                    {getFieldDecorator('category', {
                        rules: [
                            {
                                required: true,
                                message: '请选择所属分类',
                            }
                        ],
                    })(<Select placeholder="所属分类">
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                    </Select>)}
                </Form.Item>
                <Form.Item label="关键字">
                    {getFieldDecorator('keyword', {
                        rules: [
                            {
                                required: true,
                                message: '请输入关键字',
                            }
                        ],
                    })(<Input placeholder="关键字"/>)}
                </Form.Item>
                <Form.Item label="文档内容">
                    <Tabs defaultActiveKey="richText" onChange={this.handleChangeTab}>
                        <TabPane tab="UEditor" key="richText">
                            <UEditor id='richText' name="richText"></UEditor>
                        </TabPane>
                        <TabPane tab="Markdown" key="markdown">
                            <Editor value={this.state.value} onChange={this.handleMarkdown.bind(this)}/>
                        </TabPane>
                    </Tabs>
                </Form.Item>
                <Form.Item {...tailFormItemLayout} style={{marginTop: '30px', textAlign: 'center'}}>
                    <Button className="submit_btn" type="default">取消</Button>
                    <Button className="submit_btn" type="primary" htmlType="submit">确定</Button>
                </Form.Item>
            </Form>
        );
    }
}

export default Form.create()(RichText);
